<template>
	<view class="page">
		<view class="itemSub">
			<view class="item first"><text class="title">咨询订单详情</text></view>
			<view class="item"><text class="title">医生</text><text class="val">刘东东</text></view>
			<view class="item"><text class="title">服务类型</text><text class="val">咨询</text></view>
			<view class="item"><text class="title">处理状态</text><text class="val">订单未提交</text></view>
			<view class="item"><text class="title">价格</text><text class="val">9元</text></view>
			<view class="item last">
				<text class="title">患者问诊券</text>
				<image src="http://yao.hayzon.com/static/summitOrder/Arrow.png"></image>
				<text class="val">不使用优惠</text>
			</view>
		</view>
		<view class="point">
			<text>温馨提示</text><br />
			<text>医生将与您通过文字、图片进行交流。</text><br />
			<text>医生将在24小时之内，为您提供图文复诊、辨证开方以及五条诊后提问机会。</text><br />
			<text>服务中遇到问题或医生逾期未回复您可联系客服。</text><br />
			<view class="point-last">
				<text>*确认支付即同意</text><text style="color: #da6b57;">用户协议</text><br />
			</view>
		</view>
		<view class="button">
			<button class="mini-btn" type="warn" size="default" @tap="navigateTo">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			navigateTo() {
				uni.navigateTo({
					url: 'order'
				})
			}
		}
	}
</script>

<style>
	.page {
		background-repeat: no-repeat;
		background-size: 100%;
		/* background-image: url('http://yao.hayzon.com/static/summitOrder/submit.png'); */
		height: 100%;
		background-color: #f2f2eb;
		padding-top: 13upx;
		background: url(http://yao.hayzon.com/static/replace0823/chinesestyle.png) 100% center/100% no-repeat;
	}

	.itemSub {
		width: 100%;
		background-color: #fff;
	}

	.item {
		border-bottom: 2px solid #eeeeee;
		height: 99upx;
		line-height: 99upx;
		margin-left: 30upx;
		padding-right: 60upx;
		background-color: #fff;

	}

	.first {
		margin: 0upx;
		padding-left: 30upx;
	}

	.last {
		border-bottom: 0px solid #eeeeee;
		padding-right: 20upx;
	}

	.title {
		font-size: 1.2em;
		color: #333333;
	}

	.val {
		color: #666666;
		float: right;
	}

	.item image {
		width: 30upx;
		height: 30upx;
		float: right;
		margin-top: 35upx;
		margin-left: 5upx;
	}

	.point {
		margin-left: 30upx;
		line-height: 40upx;
		letter-spacing: 3upx;
		margin-right: 10upx;
		margin-top: 20upx;
	}

	.point text {
		color: #666666;
		font-size: 0.8em;
	}

	.point-last {
		padding-top: 15upx;
	}

	.button {
		height: 130upx;
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #fff;
	}

	.button button {
		width: 90%;
		background-color: #df634d;
		margin-top: 15upx;
		margin-bottom: 15upx;
	}
</style>
